<!DOCTYPE html>
<html>
<head>
    <title>Azure Software Development and Design</title>
    <meta name="keywords" content="4zure, azure, software development, design, SEO, website, logo" />
    <meta name="description" content="This is azure description." />

    <link href='http://fonts.googleapis.com/css?family=Josefin+Sans:400,300,600' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Raleway:400,100' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/font-awesome.css">

    <link rel="stylesheet" href="css/user-style.css">
    <link rel="stylesheet" href="css/style.css">
    <!-- <link rel="stylesheet" href="css/default.css"> -->
    <link rel="stylesheet" href="css/component.css">
    <link rel="stylesheet" href="css/component2.css" />
    <link rel="stylesheet" href="css/flyout.css" />
    <link rel="stylesheet" href="css/hexagon-port-index.css">
    <link rel="shortcut icon" href="img/Azure.png" type="image/x-icon" >
    
    <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.10.4.custom.min.js"></script>

    <?php  
        include("includes/Mobile_Detect.php");
        $detect = new Mobile_Detect;
        $deviceType = ($detect->isMobile() ? ($detect->isTablet() ? 'tablet' : 'phone') : 'computer');
        $scriptVersion = $detect->getScriptVersion();
        if ($deviceType == "phone") {
            $_p_size = "font-size: 12px;";
            $menu_size = "font-size: 20px;";
        } else {
            $_p_size = "";
            $menu_size = "";
        }
    ?>
</head>

<body>
    <div id="container">
        <div id="header">
            <div class="display-table">
                <div>
                    <h1>Azure <span class="divider-vertical">|</span> </h1>
                    <h2>SOFTWARE DEVELOPMENT & DESIGN</h2>
                </div>
            </div>
        </div>
        
        <div id="header-menu" data-spy="affix" data-offset-top="80">
            <div id="header-menu-content">
                <div id="menu-logo" class="text-center pull-left">
                    <div class="display-table">
                        <div>
                            <a href="/"><img src="../img/menu-logo-white.png" style="height:80%"></a>
                        </div>
                    </div>
                </div>
                <div class="menu text-center pull-right">
                    <nav class="navbar navbar-default" role="navigation">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                                <span class="sr-only">Toggle navigation</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                        </div>

                        <div class="display-table list-nav">
                            <div>
                                <div class="collapse navbar-collapse bs-js-navbar-scrollspy" id="bs-example-navbar-collapse-1">
                                    <ul class="nav navbar-nav">
                                        <li style="<?php echo $menu_size ?>"><a href="/">HOME</a></li>
                                        <li style="<?php echo $menu_size ?>"><a href="#portfolio-sect">PORTFOLIO</a></li>
                                        <li style="<?php echo $menu_size ?>"><a href="#contact-sect">CONTACT</a></li>
                                    </ul>
                				</div>
                            </div>
                        </div>
        			</nav>
        		</div>
                <div class="clear"></div>
            </div>
    	</div>
        <div class="clearfix"></div>